import Icon, { ClearOutlined, DeleteOutlined } from '@ant-design/icons';
import { FloatButton } from 'antd';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import type { Mapless } from '@/components/MapView';
import Draw, { type DrawMode } from '@/components/MapView/Mapless/draw';
import angleSvg from '../../icons/angle.svg?react';
import areaSvg from '../../icons/area.svg?react';
import lineSvg from '../../icons/line.svg?react';
import measureSvg from '../../icons/measure.svg?react';
import pointSvg from '../../icons/point.svg?react';
import type { IconType } from '../index.d';
import styles from '../index.module.less';

const DrawTool: React.FC<{
  mapless: Mapless | undefined;
  reset: number;
}> = (props) => {
  const { mapless, reset } = props;

  const drawRef = useRef<Draw>(undefined);

  const [curMode, setCurMode] = useState<DrawMode>();

  useEffect(() => {
    if (mapless) {
      drawRef.current = new Draw(mapless);
      drawRef.current.onDrawOver = () => {
        setCurMode(undefined);
      };
    }
  }, [mapless]);

  useEffect(() => {
    if (reset > 0) {
      setCurMode(undefined);
      drawRef.current?.cancelDrawing();
    }
  }, [reset]);

  useEffect(() => {
    return () => {
      // 移除绘制工具
      drawRef.current?.destroy();
    };
  }, []);

  const icons: IconType = useMemo(
    () => ({
      measure: <Icon component={measureSvg} />,
      point: <Icon component={pointSvg} />,
      line: <Icon component={lineSvg} />,
      area: <Icon component={areaSvg} />,
      angle: <Icon component={angleSvg} />,
      point_s: (
        <Icon
          component={pointSvg}
          style={{ color: 'var(--theme-color-primary)' }}
        />
      ),
      line_string_s: (
        <Icon
          component={lineSvg}
          style={{ color: 'var(--theme-color-primary)' }}
        />
      ),
      polygon_s: (
        <Icon
          component={areaSvg}
          style={{ color: 'var(--theme-color-primary)' }}
        />
      ),
      angle_s: (
        <Icon
          component={angleSvg}
          style={{ color: 'var(--theme-color-primary)' }}
        />
      ),
      delete: <DeleteOutlined />,
      clear: <ClearOutlined />,
    }),
    [],
  );

  const escapeHandler = useCallback((e: KeyboardEvent) => {
    if (e.key === 'Escape') {
      onModeClick('cancel');
    }
  }, []);

  const onModeClick = (mode: string) => {
    if (mode === 'cancel') {
      drawRef.current?.cancelDrawing();
      setCurMode(undefined);
      window.removeEventListener('keydown', escapeHandler);
      return;
    }
    if (mode === 'delete') {
      drawRef.current?.deleteDraw();
    } else if (mode === 'clear') {
      drawRef.current?.clearDrawings();
    } else {
      drawRef.current?.startDrawing(mode as DrawMode);
      setCurMode(mode as DrawMode);
    }
    window.addEventListener('keydown', escapeHandler);
  };

  return (
    <FloatButton.Group
      trigger="hover"
      shape="square"
      placement="right"
      className={styles.drawtool}
      tooltip={{
        title: curMode ? '点击或Esc取消绘制模式' : '工具箱',
        placement: 'left',
        rootClassName: styles.tooltip,
      }}
      icon={icons[curMode ? `${curMode}_s` : 'measure']}
      onClick={() => onModeClick('cancel')}
    >
      <FloatButton
        icon={icons.point}
        tooltip="点"
        onClick={() => onModeClick('point')}
      />
      <FloatButton
        icon={icons.line}
        tooltip="线"
        onClick={() => onModeClick('line_string')}
      />
      <FloatButton
        icon={icons.area}
        tooltip="面积"
        onClick={() => onModeClick('polygon')}
      />
      <FloatButton
        icon={icons.angle}
        tooltip="角度"
        onClick={() => onModeClick('angle')}
      />
      <FloatButton
        icon={icons.delete}
        tooltip="删除选择项"
        onClick={() => onModeClick('delete')}
      />
      <FloatButton
        icon={icons.clear}
        tooltip="清空"
        onClick={() => onModeClick('clear')}
      />
    </FloatButton.Group>
  );
};

export default DrawTool;
